<template>
  <div class="insert">
    <el-form label-width="auto" class="text">
      <el-form-item label="用户名" style="margin-top: 30px 0">
        <el-input v-model="id" placeholder="请输入用户名" readonly />
      </el-form-item>

      <el-form-item label="预约类型" style="margin-top: 30px 0">
        <el-input placeholder="请输入预约类型" v-model="type" />
      </el-form-item>

      <el-form-item label="预约时间" style="margin-top: 30px 0">
        <el-date-picker v-model="time" style="width: 100%; height: 30px" />
      </el-form-item>
      <el-form-item label="预约内容" style="margin-top: 30px 0">
        <el-input type="textarea" v-model="content" />
      </el-form-item>
      <el-form-item label="预约状态" style="margin-top: 30px 0">
        <el-input placeholder="请输入预约状态" v-model="del" />
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script  setup>
import { ref } from "vue";
import { defineEmits, defineProps ,watch} from "vue";

const props = defineProps({
  data: {
    type: Object,
  },
});

const info = ref(props.data);
//   const uid=ref(info.value.yuyueUid);
const type = ref(info.value.yuyueType);
const time = ref(info.value.yuyueTime);
const content = ref(info.value.yuyueContent);
const del = ref(info.value.yuyueDel);
const id = ref(info.value.yuyueId);

const emits = defineEmits(["yuyueData"]);

watch ([type,time,content,del,id],() => {
  let time3 = ref();
  const date = new Date(time.value);
  let time1 = ref();
  time1.value = date.toDateString();
  let time2 = ref();
  time2.value = date.toLocaleTimeString();
  time3.value = time1.value + " " + time2.value + " GMT+0800";
  console.log(time3.value);
  emits("yuyueData", {
    yuyueTime: time3.value,
    yuyueId: id.value,
    yuyueType: type.value,
    yuyueContent: content.value,
    yuyueDel: del.value,
    //   yuyueUid: uid.value
  });
  console.log("保存成功");
},{immediate:true});
</script>
  
  
  <style lang="less" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.insert {
  padding: 30px 10px;

  .text {
    font-weight: 700;

    .def {
      font-weight: 100;
    }

    /deep/ .el-select__wrapper {
      min-height: 35px;
    }

    .sel {
      width: 210px;
    }
  }
}
</style>